<template>
  <div class="songDetail">
    <div class="songHeader">
      <div>歌曲列表</div>
      <div>
        <input type="text" placeholder="搜索歌单音乐" v-model="searchValue" />
        <span class="iconfont iconsousuo" v-if="!searchValue"></span>
        <span class="iconfont iconcuowu" v-if="searchValue"></span>
      </div>
      <div class="move"></div>
    </div>
    <div class="songInfo">
      <div class="songItem">
        <div></div>
        <div>音乐标题</div>
        <div>歌手</div>
        <div>专辑</div>
        <div>时长</div>
      </div>
      <div
        v-for="(item,index) in songDetail"
        :key="item.id"
        class="songItem"
        @dblclick="startPlaySong(item,store)"
        :style="{backgroundColor:index%2?'#252525':'#292929'}"
      >
        <div style="textAlign:center">{{currentIndex(index+1)}}</div>
        <div>{{item.name}}</div>
        <div>{{item.singer}}</div>
        <div>{{item.album}}</div>
        <div>{{formatTime(item.duration)}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import startPlaySong from '@/songPlay.minxin.js'
import { useStore } from 'vuex'
const store = useStore()

import axios from '@/http'
onMounted(() => {
  getSongAllList()
})
const searchValue = ref<string>('')
const route = useRoute()
const songDetail = ref([])
const formatTime = computed(() => {
  return time => {
    const S = Math.floor(time / 1000)
    const m = Math.floor(S / 60)
    const s = S % 60
    return `${m}:${s < 10 ? '0' + s : s}`
  }
})
const currentIndex = computed(() => index => index < 10 ? '0' + index : index)

const getSongAllList = () => {
  axios
    .get('/playlist/track/all', {
      params: {
        id: route.params.id,
        limit: 1000
      }
    })
    .then(res => {
      console.log(res.data.songs)
      res.data.code === 200 &&
        (songDetail.value = res.data.songs.map(item => {
          return { ...item, singer: item.ar[0].name, album: item.al.name, duration: item.dt, picUrl: item.al.picUrl }
        }))
    })
}
</script>

<style scoped lang="less">
.songDetail {
  color: #fff;
  margin-top: 24px;
  padding-bottom: 60px;
  .songInfo {
    .songItem {
      display: flex;
      padding: 8px 0;
      &:hover {
        background-color: #313131 !important;
      }
      div {
        padding: 1px;
        font-size: 13px;
        color: #878787;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:hover {
          cursor: default;
        }
        &:nth-child(1) {
          flex-basis: 60px;
        }
        &:nth-child(2) {
          flex-basis: 260px;
          color: #b2b2b2;
        }
        &:nth-child(3) {
          flex-basis: 200px;
        }
        &:nth-child(4) {
          flex-basis: 260px;
        }
      }
    }
  }

  .songHeader {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #303030;
    height: 30px;
    .move {
      position: absolute;
      bottom: 0;
      width: 64px;
      height: 3px;
      background-color: #a9342d;
    }
    div:nth-child(1) {
      color: #a9342d;
      color: 14px;
    }
    div:nth-child(2) {
      position: relative;
      input {
        background-color: #252525;
        border: none;
        padding: 2px 2px 2px 26px;
        height: 24px;
        border-radius: 24px;
        color: #9fa3a8;
        outline: none;
      }
      .iconfont {
        font-size: 13px;
        position: absolute;
        line-height: 27px;
        color: #b2b2b2;
        left: 9px;
      }
    }
  }
}
</style>